import React, { Component } from "react";
// import { NavLink } from "react-router-dom/cjs/react-router-dom.min";
import style from "./tabbar.module.css";
import { TabBar } from "antd-mobile";
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { withRouter } from "react-router-dom/cjs/react-router-dom";
class ClassTabbar extends Component {
  tabs = [
    {
      key: "/films",
      title: "电影",
      icon: <AppOutline />,
    },
    {
      key: "/cinemas",
      title: "影院",
      icon: <UnorderedListOutline />,
    },

    {
      key: "/center",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  render() {
    return (
      <div className={style.tabbar}>
        {/* <ul>
          <li>
            {/* NavLink声明式导航  activeClassName表示类名自己定义的
            声明式导航可以理解为a链接  编程式导航是location.herf
            */}
        {/* <NavLink activeClassName={style.lzqactive} to="/films">
              电影
            </NavLink>
          </li>
          <li>
            <NavLink activeClassName={style.lzqactive} to="/cinemas">
              影院
            </NavLink>
          </li>
          <li>
            <NavLink activeClassName={style.lzqactive} to="/center">
              我的
            </NavLink>
          </li> */}
        {/* </ul> */}
        <TabBar
          activeKey={"/" + this.props.location.pathname.split("/")[1]}
          defaultActiveKey="1"
          onChange={(value) => {
            //编程式跳转
            this.props.history.push(value);
          }}
        >
          {this.tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    );
  }
}

export default withRouter(ClassTabbar);
